<template>
  <div>
    <h2>reactive</h2>
    <p>
      name:
      <input type="text" v-model="formData.name" />
      {{ formData.name }}
    </p>
    <p>
      age: <input type="text" @input="handleInputAge($event.target?.value)" />
      {{ formData.age }}
    </p>
  </div>
</template>
    
    <script lang="ts">
import { reactive } from "vue";

export default {
  setup() {
    // reactive用于包装一个引用数据类型，把他变成响应式的对象
    // 注意：不要去修改源对象，否则会有奇怪的错误
    // 注意：不要去包装基础数据类型，否则会有奇怪的错误
    // 注意：reactive包装的结果对象，不需要使用.value访问/修改值
    // 实际上，reactive底层就是使用ref，把对象的所有属性变为响应式
    const formData = reactive({
      name: "Hydra",
      age: "35",
    });

    const tableData = reactive([]);

    function handleInputAge(value:string) {
        formData.age = value;
    }

    return {
      formData,handleInputAge
    };
  },
};
</script>
    
    <style scoped>
</style>